<template>
    <!--学习中心-->
    <div class="center-contain">
        <div class="nav-left">
            <div class="user-box">
                <h3 @click="switchOverview()">学习中心</h3>
                <div class="user-head">
                    <img :src="account.toux" alt="" />
                </div>
                <div class="userName">{{account.name}}</div>
                <div class="userLevel">{{account.hidePhone}}</div>
            </div>
            <div class="nav-box">
                <ul class="navList">
                    <li class="fixItem">
                        <a>学习项目</a>
                        <ul class="navList">
                            <li v-for="nav in LabList" :key="nav.name">
                                <a
                                    :class="{ active: nav.first_name === activeLab.first_name }"
                                    @click="switchLab(nav)"
                                >
                                    <span>{{ nav.first_name }}</span>
                                    <i class="arrow-right">></i>
                                </a>
                            </li>
                        </ul>
                    </li>
                    <li v-for="item in navList" :key="item.name">
                        <a :class="{disable: item.enable === false}">{{ item.name }}</a>
                        <ul class="navList">
                            <li v-for="nav in item.list" :key="nav.name">
                                <a
                                    :class="{ active: nav.name === activeNav, disable: nav.enable === false }"
                                    @click="switchNav(nav)"
                                >
                                    <span>{{ nav.name }}</span>
                                    <i class="arrow-right">></i>
                                </a>
                            </li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
        <div class="contain-right">
            <div class="header" v-if="activeNav!=='学习中心'">
                <div class="tab-title">
                    <span v-if="activeCourse">{{activeLab.first_name}}</span>
                    <span class="sndName" v-if="courseList&&courseList.length>0">{{ activeCourse.course_name }}</span>
                    <a-dropdown v-if="courseList&&courseList.length>0">
                        <a class="btn-switch" @click="e => e.preventDefault()">
                            切换 <i class="arrow-bottom"></i>
                        </a>
                        <a-menu slot="overlay">
                            <a-menu-item v-for="course in courseList" :key="course.id">
                                <a @click="handleChangeCourse(course)">{{course.course_name}}</a>
                            </a-menu-item>
                        </a-menu>
                    </a-dropdown>
                </div>
            </div>
            <p class="hello" v-if="activeNav=='学习中心'" v-show="account.name">您好，{{account.name}}</p>
            <div v-show="courseList&&courseList.length>0||activeNav==='学习中心'">
                <component
                        :is="activeComponent"
                        :firstLab="activeLab"
                        :course="activeCourse"
                        :tab="typeIndex"
                        @updateUserInfo="updateUserInfo"
                        @switchNav="switchNav"
                ></component>
            </div>
            <div v-show="courseList&&courseList.length==0&&activeNav!=='学习中心'">
                <p class="nodata-title">暂无已购课程</p>
                <courseCenter :firstItem="activeLab.first_name" :secondItem="activeCourse"></courseCenter>
            </div>
        </div>
    </div>
</template>
<script>
import overview from '../setting/admin/overview.vue'
import courseCenter from  '../courseCenter/index.vue'
const allComponents = require.context('./component', false, /^.*\.vue$/);
let res_components = {};
allComponents.keys().forEach(fileName => {
    let comp = allComponents(fileName);
    res_components[fileName.replace(/^\.\/(.*)\.\w+$/, '$1')] = comp.default;
});
export default {
    name: 'studyCenter',
    components:
        Object.assign(res_components,{
            overview,
            courseCenter
        }),
    data() {
        return {
            account: {},
            activeNav: '学习中心',
            activeComponent: null,
            navList: [
              {
                name: '个人记录',
                registerType: 'login',
                list: [
                   /* {
                        name: '题库',
                        component: 'qACenter',
                        registerType: 'login'
                    },*/
                    {
                        name: '答题记录',
                        component: 'historyExamList',
                        registerType: 'login'
                    },
                    {
                        name: '错题集',
                        component: 'mistakeCollection',
                        registerType: 'login'
                    },
                    {
                        name: '答疑（建设中）',
                        enable: false,
                        component: '',
                        registerType: 'login'
                    },
                    {
                        name: '收藏（建设中）',
                        enable: false,
                        component: '',
                        registerType: 'login'
                    },
                    {
                        name: '学习进度（建设中）',
                        enable: false,
                        component: 'registerAccount',
                        registerType: 'login'
                    },
                ]
              }

            ],
            LabList:[ ], // 一级目录列表
            activeLab: {},
            subject: {},
            courseList: [], // 可选课程
            activeCourse: {},
            typeIndex: null
        };
    },
    watch: {
        // eslint-disable-next-line no-unused-vars
        $route: function(newRouter) {
            this.listenNav()
        }
    },
    mounted() {
        if(this.$util.authLogin()) {
            this.account = this.$api.getAccount();
            this.listenNav();
            this.ajaxGetZsList();
        }
    },
    methods: {
        listenNav() {
            if(this.$route.query.page) {
                this.activeNav = this.$route.query.title;
                this.activeComponent = this.$route.query.page;
                this.typeIndex = this.$route.query.type || 1;
            } else {
                this.switchOverview();
            }
        },
        switchOverview() {
            this.activeNav = '学习中心';
            this.activeComponent = 'overview';
        },
        // 切换科目
        switchLab(lab) {
            this.activeNav = '题库';
            this.activeLab = lab;
            this.activeComponent = 'qACenter';
            this.ajaxCourseList();
        },
        //切换标签页
        switchNav(nav) {
            if(nav.enable === false) {
                return
            }
            this.activeNav = nav.name || this.activeNav;
            this.activeComponent = nav.component;
            if(nav.id) {
                this.subject = nav
            }
        },
        updateUserInfo() {
            this.account = this.$api.getAccount()
            this.$emit('updateUserInfo')
        },
        // 一级科目列表
        ajaxGetZsList() {
            let option = {
                pathName: 'doGetFLabs'
            };
            this.$api.ajaxData(option).then(res => {
                this.LabList = res.obj;
                this.activeLab= this.activeLab || this.LabList[0]
                this.ajaxCourseList()
            }).catch(()=>{
                this.LabList = []
                this.activeLab= {}
                this.activeCourse = {}
            });
        },
        // 获取用户购买的课程
        ajaxCourseList() {
//            this.firstNav = this.subject? this.subject.first_name: this.$route.query.title;
//            this.navIndex = Number(this.$route.query.type) || 1
            let option = {
                pathName: 'getCourseListPC',
                authorization: true,
                method: 'post',
                errorFunc: false,
                data: {
                    firstLabName: this.activeLab.first_name
                }
            };
            this.$api.ajaxData(option).then(res => {
                this.courseList = res.obj;
                if(typeof this.activeCourse.id === 'undefined'){
                    this.courseList.forEach(item=>{
                        if(item.id === this.$route.query.courseId) {
                            this.activeCourse = item
                        }
                    })
                }else {
                    this.activeCourse = this.courseList[0] || {id: null}
                }
            }).catch(()=>{
                this.courseList = [];
                this.activeCourse = {id: null}
            });
        },
        handleChangeCourse(course) {
            this.activeCourse = course
        }
    }
};
</script>
<style scoped lang="scss">
.center-contain {
    display: flex;
    &:before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100vw;
        height: 275px;
        margin-left: calc(50% - 50vw);
        background: url('../../assets/image/back/u542.jpg') no-repeat;
        background-size: cover;
    }
    .nav-left {
        position: relative;
        background: #fff;
        border: 1px solid #f2f2f2;
        .user-box {
            width: 160px;
            height: 160px;
            background: rgb(249, 249, 249);
            color: #333;
            h3 {
                height: 26px;
                width: 100px;
                margin: 0 auto;
                line-height: 26px;
                border-bottom-left-radius: 10px;
                border-bottom-right-radius: 10px;
                font-size: 12px;
                color: #fff;
                background: rgba(0, 121, 254, 1);
                text-align: center;
                cursor: pointer;
            }
            .user-head {
                display: block;
                padding: 15px 0 10px;
                img {
                    display: block;
                    width: 50px;
                    height: 50px;
                    margin: 0 auto;
                    border-radius: 50%;
                    border: 1px solid #eee;
                    background: url(../../assets/image/icon/u92.png) no-repeat;
                    background-size: contain;
                }
            }
            .userName {
                margin-bottom: 6px;
                font-size: 12px;
                text-align: center;
            }
            .userLevel {
                padding-bottom: 10px;
                text-align: center;
                font-size: 13px;
                color: #666;
            }
        }
        .nav-box {
            .navList {
                border-bottom: 1px solid #f7f7f7;
                >li {
                    > a {
                        position: relative;
                        padding: 0 18px;
                        line-height: 35px;
                        color: #999;
                        font-size: 12px;
                        border-left: 2px solid transparent;
                        text-decoration: none;
                        -webkit-user-select: none;
                        cursor: default;
                        &.disable {
                            color: #b9b9b9;
                            border: none;
                            cursor: not-allowed;
                        }
                    }
                    .navList {
                        li {
                            a {
                                display: flex;
                                height: 35px;
                                align-items: center;
                                justify-content: space-between;
                                color: #333;
                                white-space: nowrap;
                                overflow: hidden;
                                text-overflow: ellipsis;
                                cursor: pointer;
                                &:hover,
                                &.active {
                                    color: rgba(0, 106, 222, 1);
                                    border-color: rgba(0, 106, 222, 1);
                                    background: #f9f9f9;
                                }
                                &.disable {
                                    color: #999;
                                    border: none;
                                    background: none;
                                    cursor: not-allowed;
                                }
                            }
                        }
                    }
                    &.fixItem {
                        .navList {
                            li {
                                a {
                                    &:hover,
                                    &.active {
                                        border-color: rgba(255, 106, 0, 1);
                                        color: rgba(255, 106, 0, 1);
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }
    .contain-right {
        position: relative;
        width: 100%;
        padding: 30px 20px;
        .header {
            display: flex;
            padding: 10px 20px 30px;
            align-items: center;
            .tab-title {
                font-size: 24px;
                color: #fff;
                .sndName {
                    margin-left: 15px;
                    font-size: 20px;
                }
                .btn-switch {
                    margin-left: 15px;
                    font-size: 12px;
                    color: #fff;
                }
            }
        }
        .hello {
            width: 100%;
            background: transparent;
            margin-bottom: 20px;
            line-height: 24px;
            height: 24px;
            font-size: 16px;
            color: #fff;
            font-weight: bold;
        }
    }
    .nodata-title {
        padding: 0 20px;
        font-size: 16px;
        color: #fff;
    }
}
</style>
